<template>
  <div class="not-found">
    <div class="not-found-warpper">
      <div>
        <img src="./atlas.svg" alt="" />
      </div>
      <div class="text">
        <h1>OPPS!</h1>
        <p>
          <span style="margin-right: 4px"> 嚯！好家伙，你给我干哪儿来了~ </span>
          <svg viewBox="0 0 1024 1024" width="32" height="32">
            <path
              d="M915.626667 472.746667c0 231.253333-194.56 418.133333-435.2 418.133333s-435.2-186.88-435.2-418.133333 194.56-418.133333 435.2-418.133334 435.2 187.733333 435.2 418.133334"
              fill="#FFE04A"
              p-id="8953"></path>
            <path
              d="M480.426667 903.68c-246.613333 0-448-192.853333-448-430.933333S232.96 42.666667 480.426667 42.666667s448 192.853333 448 430.933333-201.386667 430.08-448 430.08z m0-836.266667C246.613333 67.413333 57.173333 249.173333 57.173333 472.746667S246.613333 878.933333 480.426667 878.933333s423.253333-181.76 423.253333-405.333333S713.386667 67.413333 480.426667 67.413333z"
              fill="#545971"
              p-id="8954"></path>
            <path
              d="M480.426667 759.466667C302.933333 759.466667 150.186667 702.293333 76.8 580.266667c50.346667 174.933333 211.626667 302.933333 402.773333 302.933333s353.28-128 402.773334-302.933333C810.666667 702.293333 657.066667 759.466667 480.426667 759.466667"
              fill="#FFD05A"
              p-id="8955"></path>
            <path
              d="M328.533333 295.253333c-0.853333 0-2.56 0-3.413333-0.853333l-126.293333-37.546667c-6.826667-1.706667-10.24-8.533333-8.533334-15.36 1.706667-6.826667 8.533333-10.24 15.36-8.533333l126.293334 37.546667c6.826667 1.706667 10.24 8.533333 8.533333 15.36-1.706667 5.973333-6.826667 9.386667-11.946667 9.386666zM626.346667 295.253333c-5.12 0-10.24-3.413333-11.946667-9.386666-1.706667-6.826667 1.706667-13.653333 8.533333-15.36l126.293334-37.546667c6.826667-1.706667 13.653333 1.706667 15.36 8.533333 1.706667 6.826667-1.706667 13.653333-8.533334 15.36l-126.293333 37.546667c-0.853333 0.853333-2.56 0.853333-3.413333 0.853333z"
              fill="#545971"
              p-id="8956"></path>
            <path
              d="M350.72 354.986667c0-12.8-11.093333-23.04-23.893333-23.04H203.946667c-13.653333 0-23.893333 10.24-23.893334 23.04v552.106666c0 12.8-5.973333 31.573333-13.653333 42.666667l-26.453333 38.4c-7.68 10.24-2.56 19.626667 10.24 19.626667h229.546666c13.653333 0 17.92-8.533333 10.24-19.626667l-26.453333-38.4c-7.68-10.24-13.653333-29.866667-13.653333-42.666667V354.986667zM804.693333 1006.933333c13.653333 0 17.92-8.533333 10.24-19.626666l-26.453333-38.4c-7.68-10.24-13.653333-29.866667-13.653333-42.666667V354.986667c0-12.8-11.093333-23.04-23.893334-23.04H628.906667c-13.653333 0-23.893333 10.24-23.893334 23.04v552.106666c0 12.8-5.973333 31.573333-13.653333 42.666667l-26.453333 38.4c-7.68 10.24-2.56 19.626667 10.24 19.626667h229.546666z"
              fill="#88C8FC"
              p-id="8957"></path>
            <path
              d="M813.226667 331.946667c0 8.533333-9.386667 14.506667-20.48 14.506666h-204.8c-11.093333 0-20.48-6.826667-20.48-14.506666s9.386667-14.506667 20.48-14.506667h204.8c11.093333 0 20.48 5.973333 20.48 14.506667M388.266667 331.946667c0 8.533333-9.386667 14.506667-20.48 14.506666H162.133333c-11.093333 0-20.48-6.826667-20.48-14.506666s9.386667-14.506667 20.48-14.506667h204.8c11.946667 0 21.333333 5.973333 21.333334 14.506667"
              fill="#545971"
              p-id="8958"></path>
            <path
              d="M477.013333 468.48c-23.04-0.853333-44.373333 17.92-46.933333 41.813333l-25.6 256c-2.56 23.04 14.506667 41.813333 38.4 41.813334l75.093333-1.706667c23.04-0.853333 40.96-19.626667 38.4-43.52l-25.6-250.88c-2.56-23.04-23.04-42.666667-46.933333-43.52h-6.826667z"
              fill="#DD6B73"
              p-id="8959"></path>
            <path
              d="M442.026667 820.053333c-14.506667 0-28.16-5.973333-37.546667-16.213333-9.386667-10.24-14.506667-24.746667-12.8-40.106667l25.6-256c2.56-29.866667 29.013333-52.906667 58.88-52.906666h7.68c29.866667 0.853333 56.32 25.6 58.88 54.613333l24.746667 250.88c1.706667 14.506667-3.413333 29.013333-12.8 40.106667-9.386667 11.093333-23.04 17.066667-38.4 17.066666l-75.093334 1.706667c1.706667 0.853333 0.853333 0.853333 0.853334 0.853333z m34.133333-339.626666c-16.213333 0-31.573333 13.653333-33.28 29.866666l-25.6 256c-0.853333 7.68 1.706667 14.506667 5.973333 19.626667 5.12 5.12 11.946667 7.68 18.773334 7.68l75.093333-1.706667c7.68 0 14.506667-3.413333 19.626667-8.533333s6.826667-12.8 6.826666-20.48L518.826667 512c-1.706667-17.066667-17.066667-31.573333-34.133334-31.573333h-8.533333c0.853333 0 0 0 0 0z"
              fill="#545971"
              p-id="8960"></path>
            <path
              d="M826.88 897.706667m-28.16 0a28.16 28.16 0 1 0 56.32 0 28.16 28.16 0 1 0-56.32 0Z"
              fill="#88C8FC"
              p-id="8961"></path>
            <path
              d="M576 945.493333m-24.746667 0a24.746667 24.746667 0 1 0 49.493334 0 24.746667 24.746667 0 1 0-49.493334 0Z"
              fill="#88C8FC"
              p-id="8962"></path>
            <path
              d="M119.466667 897.706667m-23.04 0a23.04 23.04 0 1 0 46.08 0 23.04 23.04 0 1 0-46.08 0Z"
              fill="#88C8FC"
              p-id="8963"></path>
          </svg>
        </p>

        <div class="link">
          <el-button size="large" type="primary" :icon="Home" @click="goHome">返回首页</el-button>
          <el-button size="large" type="primary" :icon="Return" @click="goBack">返回上一页</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Home, Return } from '@icon-park/vue-next';
import { useRouter } from 'vue-router';

const router = useRouter();

function goHome() {
  router.push({ name: 'home' });
}
function goBack() {
  router.go(-1);
}
</script>

<style scoped lang="scss">
.not-found {
  width: 100vw;
  height: 100vh;
  padding: 80px;
  background: url(http://comicui.cn/image/404-bg.jpg) #ffffff;

  .not-found-warpper {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    border: 1px solid #fff;
    box-shadow: 0px 0px 1.1px rgba(0, 0, 0, 0.075), 0px 0px 3.6px rgba(0, 0, 0, 0.087), 0px 0px 16px rgba(0, 0, 0, 0.16);

    > div {
      flex: 1;
    }

    .text {
      padding: 40px;
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 900;

      h1 {
        font-size: 80px;
        letter-spacing: 25px;
        font-family: fantasy;
        font-style: oblique;
      }

      p {
        font-size: 14px;
        margin: 80px 0 40px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
